<title>tour</title>

<div class="content-header row">
	 <div class="content-header-left col-md-8 col-12 mb-2 breadcrumb-new">
	 	<h3 class="content-header-title mb-0 d-inline-block">tour</h3>
	 	<div class="row breadcrumbs-top d-inline-block">
	 		<div class="breadcrumb-wrapper mr-1">
	 			<ol class="breadcrumb">
	 				<li class="breadcrumb-item"><a href="/dashboard" class="menu-router">首页</a></li>
	 				<li class="breadcrumb-item"><a href="javascript:;">组件</a></li>
	 				<li class="breadcrumb-item active">tour</li>
	 			</ol>
	 		</div>
	 	</div>
	 </div>
</div>

<div class="content-body">
<!-- Apex template tour starts -->
<section id="quill-editor">
    <div class="row">
        <div class="col-xl-4 col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h4>User Tour</h4>
                </div>
                <div class="card-body">
                    <div>
                        <p>Click this button to start a demo user Tour.</p>
                        <button id="btnStartTour" class="btn btn-primary btn-raised">Start Tour</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h4>Define Your Steps</h4>
                </div>
                <div class="card-body">
                    <div>
                        <pre class="language-javascript">
      <code class="language-javascript">steps: [  
          &#123;
              title: "Customizer",
              content: "This is the customizer",
              target: "customizer-toggle-setting",
              placement: "left"
          },
          &#123;
              ...
          }     
      ]</code></pre>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h4>Initialize Tour</h4>
                </div>
                <div class="card-body">
                    <div>
                        <pre class="language-javascript">
      <code class="language-javascript">hopscotch.startTour(tour);</code></pre>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Apex template tour Ends -->
</div>

<script type="text/javascript">
	lucky.require('tour', lucky.factory('tour'));
</script>